<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="JS/new_file.js"></script>
	</head>
	<body>
		
		<div class="box">
			<table cellspacing="1" cellpadding="0">
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>爱好</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!--<tr>
						<td>1</td>
						<td>kky1</td>
						<td>15</td>
						<td>男</td>
						<td>学习</td>
						<td>
							<button type="button" onclick="up()">上移</button>
							<button type="button" onclick="del()">删除</button>
							<button type="button" onclick="down()">下移</button>
						</td>
					</tr>-->
				</tbody>
			</table>
		</div>
		
		<script type="text/javascript">
			//获取元素
			var tbody = document.querySelector("tbody");
			
			//初始化页面
			var obj = JSON.parse(localStorage.obj)
			window.onload=function(){
				show(obj);
			}
			
			//进行渲染页面
			function show(obj){
				var str = '';
				for(var i=0; i<obj.arr.length; i++){
					str+=`<tr>
								<td>${i+1}</td>
								<td>${obj.arr[i].nam}</td>
								<td>${obj.arr[i].age}</td>
								<td>${obj.arr[i].sex}</td>
								<td>${obj.arr[i].hobby}</td>
								<td>
									<button type="button" class="shang" onclick="up(${obj.arr[i].tableId})">上移</button>
									<button type="button" onclick="del(${obj.arr[i].tableId})">删除</button>
									<button type="button" class="xia" onclick="down(${obj.arr[i].tableId})">下移</button>
								</td>
							</tr>`
				}
				tbody.innerHTML = str;
				var shang = document.querySelectorAll(".shang");
				var xia = document.querySelectorAll(".xia");
//				localStorage.obj = JSON.stringify(obj);
                for(var i=0; i<obj.arr.length; i++){
                	if(i==0){
                		shang[i].disabled=true;
                	}
                	if(i==obj.arr.length-1){
                		xia[i].disabled=true;
                	}
                }
			}
			
			//删除
			function del(id){
				for(var i=0; i<obj.arr.length; i++){
					if(id==obj.arr[i].tableId){
						obj.arr.splice(i,1)
					}
					
				}
				localStorage.obj = JSON.stringify(obj);
				show(obj);
			}
			
			//上移
			function up(id){
				for(var i=0; i<obj.arr.length; i++){
					if(id==obj.arr[i].tableId){
						//splice替换功能
						obj.arr.splice(i-1, 2, obj.arr[i],obj.arr[i-1])
					}

				}
				localStorage.obj = JSON.stringify(obj);
				show(obj);
			}
			
			//下移
			function down(id){
				for(var i=0; i<obj.arr.length; i++){
					if (id == obj.arr[i].tableId && i < obj.arr.length - 1) {
                    //splice替换功能
                    obj.arr.splice(i, 2, obj.arr[i+1], obj.arr[i])
                   }
				}
				localStorage.obj = JSON.stringify(obj);
				show(obj);
			}
		</script>
	</body>
</html>
